<template>
  <!-- 处理带插槽内容 -->
  <template v-if="$slots.default">
    <template v-if="typeof slotText === 'string'">
      <a @click.stop="handleClick">{{ slotText }}</a>
    </template>
    <component v-else :is="slotEl" @click.stop="handleClick" />
  </template>

  <!-- 不带边框的图片 -->
  <img
    v-else-if="!border"
    :class="['bc-image', $attrs.class]"
    :src="previewSrc"
    v-bind="$attrs"
    @click.stop="handleClick"
  />

  <!-- 带边框的图片容器 -->
  <div v-else :class="[$attrs.class, 'bc-image-border', size && `bc-image-size-${size}`]" @click.stop="handleClick">
    <img class="bc-image" :src="previewSrc" v-bind="$attrs" />
  </div>
</template>

<script setup>
import { useSlots, computed } from 'vue';
import usePreview from './usePreview';

const props = defineProps({
  border: Boolean,
  src: String,
  size: {
    type: String,
    default: 'default',
  },
  group: String,
  reader: Object,
});

// 处理插槽内容
const slots = useSlots();
const slotText = computed(() => slots.default?.()[0].children);
const slotEl = computed(() => slots.default?.()[0]);

// 预览逻辑（需实现 usePreview）
const { previewSrc, open } = usePreview(props.src, {
  group: props.group,
  reader: props.reader,
});

const handleClick = (e) => {
  props.onClick?.(e);
  open();
};
</script>

<style lang="less">
.bc-image {
  cursor: pointer;
}

.bc-image-border {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1px;
  border: 2px solid var(--color-border, #d9d9d9);
  border-radius: var(--size-border-radius-lg, 8px);
  overflow: hidden;
  transition: 0.2s ease;

  &.bc-image-size-full {
    width: 100%;
  }

  &.bc-image-size-default {
    width: 80px;
    max-height: 80px;
  }

  &.bc-image-size-default:hover {
    position: relative;
    z-index: 99;
    box-shadow: 0 4px 12px 6px rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
    // transform: translateY(-6px);
  }

  .bc-image {
    width: 100%;
    height: 100%;
    border-radius: var(--size-border-radius, 6px);
  }
}
</style>
